<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="../css/personal_center.css">
    <link rel="stylesheet" href="../css/flex.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/style_zj.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
</head>
<body>
<!--<div id="header_01_html">
    <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
</div>-->
<div class="content-box">
    <!--<div id="left_tab_html">
        <iframe id="left_tab" src="left_tab.html" frameborder="0"></iframe>
    </div>-->
    <div class="right-box">
        <div class=" flex-row-start" id="personal-manage">
            <!-- 个人中心主内容 -->
            <div class="personal-manage" >
                <div class="base-info layui-card flex-row-start-stretch">
                    <!--<div class="flex-row-start-stretch">-->
                        <div class="store-img-wrapper">
                            <img src="../img/personal-center/default-avatar.png" alt="">
                        </div>
                        <div class="store-info flex-column-start-space-evenly">
                                <div class="operation flex-row-space-between">
                                    <div >
                                        <label for="">{{storeName}}</label>
                                        <img src="../img/personal-center/unauthorized.png" alt="">
                                    </div>
                                    <button class="layui-btn layui-btn-radius layui-btn-normal">完善资料</button>
                                </div>
                                <div>
                                    <label class="status-label">店铺状态：</label>
                                    <span class="status-name">{{storeStatus}}</span>
                                </div>
                        </div>
                        <div class="statistics-wrapper flex-row-space-around">
                            <!--<div class="count-wrapper flex-row-start">-->
                                <div class="count flex-column-center">
                                    <img src="../img/personal-center/pageview.png" alt="">
                                    <label>{{pageViews}}</label>
                                    <span>店铺浏览量</span>
                                </div>
                                <div class="count flex-column-center">
                                    <img src="../img/personal-center/product-view.png" alt="">
                                    <label>{{productFlow}}</label>
                                    <span>产品流量</span>
                                </div>
                                <div class="count flex-column-center">
                                    <img src="../img/personal-center/login-sum.png" alt="">
                                    <label>{{loginCount}}</label>
                                    <span>商品关注数</span>
                                </div>
                            <!--</div>-->
                        </div>
                    <!--</div>-->
                </div>
                <div class="latest-offer layui-card">
                    <div class="layui-card-header flex-row-space-between">
                        <div class="card-title">
                            <img src="../img/personal-center/offer-price.png" alt="">
                            <span>最新询报价</span>
                        </div>
                        <div class="see-more">
                            查看更多
                            <i class="layui-icon layui-icon-right"></i>
                        </div>
                    </div>
                    <div class="layui-card-body card-content">
                        <div v-if="offerList.length < 1" class="empty-data">
                            <img src="../img/personal-center/empty-data.png" alt="">
                            <p>暂无数据</p>
                        </div>

                    </div>
                </div>
                <div class="commodity-manage layui-card">
                    <div class="layui-card-header card-title">

                        <img src="../img/personal-center/product-manage.png" alt="">
                            <span>商品管理</span>
                    </div>
                    <div class="layui-card-body card-content">
                        <div class="flex-row-start-space-around">
                            <div class="sum-wrapper">
                                <p>商品概况：</p>
                                <dl class="flex-row-start">
                                    <dd>出售中（<span class="num">{{productStatusSum.inSale}}</span>）</dd>
                                    <dd>已下架（<span class="num">{{productStatusSum.forceOffSale}}</span>）</dd>
                                </dl>
                            </div>
                            <!--<div class="sum-wrapper">-->
                                <!--<p>品类/车型筛选：</p>-->
                                <!--<dl>-->
                                    <!--<dd>可筛选的产品（<span>{{filterSum.can}}</span>）</dd>-->
                                    <!--<dd>不能筛选的产品（<span>{{filterSum.notCan}}</span>）</dd>-->
                                <!--</dl>-->
                            <!--</div>-->
                            <!--<div class="sum-wrapper">-->
                                <!--<p>商品星级：</p>-->
                                <!--<dl>-->
                                    <!--<dd>一星（<span>{{productStarSum.oneStar}}</span>）</dd>-->
                                    <!--<dd>二星（<span>{{productStarSum.twoStar}}</span>）</dd>-->
                                    <!--<dd>三星（<span>{{productStarSum.threeStar}}</span>）</dd>-->
                                    <!--<dd>四星（<span>{{productStarSum.fourStar}}</span>）</dd>-->
                                    <!--<dd>五星（<span>{{productStarSum.fiveStar}}</span>）</dd>-->
                                <!--</dl>-->
                            <!--</div>-->
                            <div class="sum-wrapper flex-row-start">
                                <div class="">
                                <p>授权品牌：</p>
                                    <span v-if="brandList.length === 0">您还未提交授权品牌</span>
                                <dl v-else  class="flex-row-start"></dl>

                            </div>
                                <div class="btn-wrapper">
                                     <button type="button" class="submit-brand-btn">立即提交</button>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>
                <div class="deal-manage layui-card">
                    <div class="layui-card-header card-title">

                        <img src="../img/personal-center/deal-manage.png" alt="">
                            <span>卖家交易管理</span>
                    </div>
                    <div class="deal-manage-list flex-row-start">
                        <div class="before-deal">
                            <div class="deal-type-title"><p >交易前</p></div>
                            <dl>
                                <dd>全部订单</dd>
                            </dl>
                        </div>
                        <div class="in-deal">
                            <p class="deal-type-title">交易中</p>
                            <dl>
                                <dd>待确认（<span class="num">{{inDeal[0]}}</span>）</dd>
                                <dd>待买家付款（<span class="num">{{inDeal[0]}}</span>）</dd>
                                <dd>待发货（<span class="num">{{inDeal[0]}}</span>）</dd>
                                <dd>待买家确认收货（<span class="num">{{inDeal[0]}}</span>）</dd>
                            </dl>
                        </div>
                        <div class="after-deal">
                            <p class="deal-type-title">交易后</p>
                            <dl>
                                <dd>待回复评价（<span class="num">{{inDeal[0]}}</span>）</dd>
                                <dd>待处理退款（<span class="num">{{inDeal[0]}}</span>）</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右边侧边栏 -->
            <div class="right-info">
                <div class="info-box">
                    <div class="info-title-wrapper">公告</div>
                    <!-- 向下的三角形 -->
                    <div class="triangle-down">
                        <span></span>
                    </div>
                    <ul>
                        <li v-for="(info, infoI) in noticeList" :key="info.id" :class="[info.isRead ? '': 'theme-color']">
                            <div>
                                <span class="diamond" v-if="!info.isRead"></span>
                            </div>
                            {{ info.title }}
                        </li>
                    </ul>
                </div>
                <div class="info-box">
                    <div class="info-title-wrapper">帮助中心</div>
                    <!-- 向下的三角形 -->
                    <div class="triangle-down">
                        <span></span>
                    </div>
                    <ul>
                        <li v-for="(info2, infoI2) in helpList" :key="info2.id" :class="[info2.isRead ? '': 'theme-color']">
                            <div>
                                <span class="diamond" v-if="!info2.isRead"></span>
                            </div>
                            {{ info2.title }}
                        </li>
                    </ul>
                </div>
                <div class="info-box">
                    <div class="info-title-wrapper" style="background-color: #02a867">微信公众号</div>
                    <!-- 向下的三角形 -->
                    <div class="triangle-down" style="border-color: #02a867 transparent transparent;">
                        <!--<span></span>-->
                    </div>
                    <img src="" alt="">
                </div>
            </div>
        </div>
    </div>
</div>

<!--<div>
    <iframe src="footer-record.html" style="width: 100%;border: none;height:60px;"></iframe>
</div>-->
<script src="../js/config.js"></script>
<script>
//    if(Token){
//        $('.login-0').hide();
//        $('.login-name').html(localStorage.getItem('username'));
//    }else{
//        $('.login-1').show();
//    }
//
//    $("body").on("click",".loginOut",function () {
//        localStorage.removeItem("Token");
//        localStorage.removeItem("userId");
//        localStorage.removeItem("storeId");
//        noNeedLogin.indexOf(pageName(window.location.href)) == -1?location.href = "login.html":location.reload()
//    })

//    $(document).on('click','.js-release',function(){
//        window.open('choose-class.html');
//    })

    var personalManageVue = new Vue({
        el:'#personal-manage',
        data:{
            storeName:'汽车配件专营店',
            storeStatus:'等待审核',
            pageViews:12,
            productFlow:12,
            loginCount:1,
            productStatusSum:{'inSale':0,'inReview':2,'notApproved':1,'forceOffSale':0},
            productStarSum:{'oneStar':0,'twoStar':2,'threeStar':1,'fourStar':0,'fiveStar':0},
            filterSum:{'can':2,'notCan':0},
            authorizedBrand:[],
            inDeal:[0,1,2,3,4],
            afterDeal:[0,1],
            offerList:[],
            brandList:[],
            noticeList: [{title: '新版旺铺设置功能上线', id: '1', isRead: false}, {
                title: '紫色鹭网被评为“十佳”...',
                id: '2',
                isRead: false
            }, {title: '新版旺铺设置功能上线', id: '3', isRead: true}, {
                title: '紫色鹭网被评为“十佳”...',
                id: '4',
                isRead: true
            }, {title: '紫色鹭网被评为“十佳”...', id: '5', isRead: true}],
            helpList:[{title: '新版旺铺设置功能上线', id: '1', isRead: false}, {
                title: '紫色鹭网被评为“十佳”...',
                id: '2',
                isRead: false
            }, {title: '新版旺铺设置功能上线', id: '3', isRead: true}, {
                title: '紫色鹭网被评为“十佳”...',
                id: '4',
                isRead: true
            }, {title: '紫色鹭网被评为“十佳”...', id: '5', isRead: true}]
        },
        mounted:function(){
            this.getStoreStatistics();
        },
        methods:{
            getStoreStatistics: function(){
                get_ajax('/sys/store/statistics',{},
                    function (data) {
                        console.log(data);
                        personalManageVue.pageViews = data.pageViews;
                        personalManageVue.productStatusSum.inSale = data.onOffer;
                        personalManageVue.productStatusSum.forceOffSale = data.undercarriage;
                        personalManageVue.loginCount = data.goodsFollow;
                    }
                );
            }
        }
    });
</script>
</body>
</html>